<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>积分充值 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      min-height: 100vh;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #0d6efd;
      color: white;
    }
    
    /* 通用充值页面样式 */
    .recharge-page {
      display: none;
      padding: 15px;
    }
    
    .recharge-page.active {
      display: block;
    }
    
    .balance-info {
      background-color: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      text-align: center;
    }
    
    .balance-title {
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;
    }
    
    .balance-amount {
      font-size: 28px;
      font-weight: 700;
      color: #333;
      margin-bottom: 5px;
    }
    
    .balance-desc {
      font-size: 12px;
      color: #999;
    }
    
    .recharge-title {
      font-size: 16px;
      font-weight: 600;
      margin: 20px 0 10px;
      color: #333;
    }
    
    /* 样式1 - 经典网格 */
    .plan-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }
    
    .plan-item {
      background-color: #fff;
      border-radius: 12px;
      padding: 15px 10px;
      text-align: center;
      border: 1px solid #eee;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .plan-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    
    .plan-item.selected {
      border-color: #0d6efd;
      background-color: #f0f7ff;
      position: relative;
    }
    
    .plan-item.selected::after {
      content: "\f00c";
      font-family: "FontAwesome";
      position: absolute;
      top: -6px;
      right: -6px;
      width: 20px;
      height: 20px;
      background-color: #0d6efd;
      color: white;
      border-radius: 50%;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .plan-points {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 5px;
    }
    
    .plan-price {
      font-size: 14px;
      color: #666;
    }
    
    .plan-desc {
      font-size: 11px;
      color: #999;
      margin-top: 5px;
    }
    
    /* 样式2 - 高级套餐 */
    .premium-plans {
      margin-bottom: 20px;
    }
    
    .premium-plan {
      background-color: #fff;
      border-radius: 12px;
      padding: 18px;
      margin-bottom: 12px;
      border: 1px solid #eee;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .premium-plan:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    
    .premium-plan.highlight {
      border-color: #ff7d00;
      position: relative;
      overflow: hidden;
    }
    
    .premium-plan.highlight::before {
      content: "最受欢迎";
      position: absolute;
      top: 10px;
      right: -30px;
      background-color: #ff7d00;
      color: white;
      font-size: 10px;
      padding: 2px 30px;
      transform: rotate(45deg);
    }
    
    .plan-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px;
    }
    
    .plan-name {
      font-weight: 600;
      font-size: 16px;
    }
    
    .plan-bonus {
      background-color: #fff8e6;
      color: #ff7d00;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
    }
    
    .plan-details {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .plan-info {
      display: flex;
      flex-direction: column;
    }
    
    .plan-main {
      font-size: 14px;
      color: #666;
    }
    
    .plan-extra {
      font-size: 12px;
      color: #999;
      margin-top: 3px;
    }
    
    /* 样式3 - 阶梯充值 */
    .tiered-plans {
      margin-bottom: 20px;
    }
    
    .tiered-plan {
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 10px;
      border: 1px solid #eee;
      cursor: pointer;
    }
    
    .tiered-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background-color: #f0f7ff;
      color: #0d6efd;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      font-size: 18px;
    }
    
    .tiered-info {
      flex: 1;
    }
    
    .tiered-title {
      font-weight: 600;
      margin-bottom: 3px;
    }
    
    .tiered-desc {
      font-size: 12px;
      color: #999;
    }
    
    .tiered-amount {
      text-align: right;
    }
    
    .tiered-price {
      font-weight: 600;
    }
    
    /* 样式4 - 活动专题 */
    .campaign-header {
      background: linear-gradient(135deg, #7b4397, #dc2430);
      color: white;
      border-radius: 12px;
      padding: 20px 15px;
      margin-bottom: 15px;
      text-align: center;
    }
    
    .campaign-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    
    .campaign-desc {
      font-size: 14px;
      opacity: 0.9;
      margin-bottom: 12px;
    }
    
    .campaign-timer {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 10px;
    }
    
    .timer-item {
      background-color: rgba(255,255,255,0.2);
      width: 30px;
      height: 30px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
    }
    
    .limited-plan {
      background-color: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      border: 2px dashed #ff7d00;
    }
    
    .limited-tag {
      display: inline-block;
      background-color: #ff7d00;
      color: white;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
      margin-bottom: 10px;
    }
    
    /* 支付方式 */
    .payment-methods {
      background-color: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 20px;
    }
    
    .method-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #eee;
      cursor: pointer;
    }
    
    .method-item:last-child {
      border-bottom: none;
    }
    
    .method-icon {
      width: 30px;
      height: 30px;
      margin-right: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
    
    .method-name {
      flex: 1;
      font-size: 15px;
    }
    
    .method-select {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .method-select.selected {
      border-color: #0d6efd;
    }
    
    .method-select.selected::after {
      content: "\f00c";
      font-family: "FontAwesome";
      font-size: 12px;
      color: #0d6efd;
    }
    
    /* 充值按钮 */
    .recharge-btn {
      display: block;
      width: 100%;
      padding: 14px;
      background-color: #0d6efd;
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      text-decoration: none;
      margin-top: 10px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    
    .recharge-btn:hover {
      background-color: #0b5ed7;
      color: white;
    }
    
    /* 底部提示 */
    .footer-note {
      font-size: 12px;
      color: #999;
      text-align: center;
      margin: 15px 0 30px;
      padding: 0 15px;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">积分充值</h1>
    <a href="#" class="nav-btn" id="helpBtn">
      <i class="fa fa-question-circle"></i>
    </a>
  </nav>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="classic">经典网格</div>
      <div class="style-tab" data-style="premium">高级套餐</div>
      <div class="style-tab" data-style="tiered">阶梯充值</div>
      <div class="style-tab" data-style="campaign">活动专题</div>
    </div>
  </div>
  
  <!-- 经典网格样式 -->
  <div class="recharge-page active" id="classic">
    <div class="balance-info">
      <div class="balance-title">当前可用积分</div>
      <div class="balance-amount">1,250</div>
      <div class="balance-desc">1元 = 10积分 · 积分可用于打赏、兑换等</div>
    </div>
    
    <h2 class="recharge-title">选择充值金额</h2>
    
    <div class="plan-grid">
      <div class="plan-item" data-points="100" data-price="10">
        <div class="plan-points">100积分</div>
        <div class="plan-price">¥10</div>
      </div>
      <div class="plan-item selected" data-points="200" data-price="20">
        <div class="plan-points">200积分</div>
        <div class="plan-price">¥20</div>
      </div>
      <div class="plan-item" data-points="500" data-price="50">
        <div class="plan-points">500积分</div>
        <div class="plan-price">¥50</div>
      </div>
      <div class="plan-item" data-points="1000" data-price="100">
        <div class="plan-points">1000积分</div>
        <div class="plan-price">¥100</div>
        <div class="plan-desc">赠100积分</div>
      </div>
      <div class="plan-item" data-points="2000" data-price="200">
        <div class="plan-points">2000积分</div>
        <div class="plan-price">¥200</div>
        <div class="plan-desc">赠250积分</div>
      </div>
      <div class="plan-item" data-points="5000" data-price="500">
        <div class="plan-points">5000积分</div>
        <div class="plan-price">¥500</div>
        <div class="plan-desc">赠800积分</div>
      </div>
    </div>
    
    <h2 class="recharge-title">选择支付方式</h2>
    
    <div class="payment-methods">
      <div class="method-item selected">
        <div class="method-icon">
          <i class="fa fa-credit-card" style="color:#007bff;"></i>
        </div>
        <div class="method-name">微信支付</div>
        <div class="method-select selected"></div>
      </div>
      <div class="method-item">
        <div class="method-icon">
          <i class="fa fa-paypal" style="color:#00aae3;"></i>
        </div>
        <div class="method-name">支付宝</div>
        <div class="method-select"></div>
      </div>
      <div class="method-item">
        <div class="method-icon">
          <i class="fa fa-credit-card-alt" style="color:#666;"></i>
        </div>
        <div class="method-name">银行卡支付</div>
        <div class="method-select"></div>
      </div>
    </div>
    
    <button class="recharge-btn" id="classicPayBtn">确认支付 ¥20</button>
    
    <p class="footer-note">
      充值成功后积分将实时到账，如有问题请联系客服<br>
      所有支付均由第三方支付平台提供安全保障
    </p>
  </div>
  
  <!-- 高级套餐样式 -->
  <div class="recharge-page" id="premium">
    <div class="balance-info">
      <div class="balance-title">会员积分余额</div>
      <div class="balance-amount">3,580</div>
      <div class="balance-desc">会员专享：充值额外赠送10%-20%积分</div>
    </div>
    
    <h2 class="recharge-title">会员专属套餐</h2>
    
    <div class="premium-plans">
      <div class="premium-plan">
        <div class="plan-header">
          <div class="plan-name">白银套餐</div>
          <div class="plan-bonus">赠10%</div>
        </div>
        <div class="plan-details">
          <div class="plan-info">
            <div class="plan-main">1000积分 + 100赠送积分</div>
            <div class="plan-extra">适合日常使用</div>
          </div>
          <div class="plan-price">¥100</div>
        </div>
      </div>
      
      <div class="premium-plan highlight">
        <div class="plan-header">
          <div class="plan-name">黄金套餐</div>
          <div class="plan-bonus">赠15%</div>
        </div>
        <div class="plan-details">
          <div class="plan-info">
            <div class="plan-main">3000积分 + 450赠送积分</div>
            <div class="plan-extra">性价比之选</div>
          </div>
          <div class="plan-price">¥300</div>
        </div>
      </div>
      
      <div class="premium-plan">
        <div class="plan-header">
          <div class="plan-name">铂金套餐</div>
          <div class="plan-bonus">赠20%</div>
        </div>
        <div class="plan-details">
          <div class="plan-info">
            <div class="plan-main">5000积分 + 1000赠送积分</div>
            <div class="plan-extra">大额充值首选</div>
          </div>
          <div class="plan-price">¥500</div>
        </div>
      </div>
      
      <div class="premium-plan">
        <div class="plan-header">
          <div class="plan-name">钻石套餐</div>
          <div class="plan-bonus">赠25%</div>
        </div>
        <div class="plan-details">
          <div class="plan-info">
            <div class="plan-main">10000积分 + 2500赠送积分</div>
            <div class="plan-extra">尊享特权</div>
          </div>
          <div class="plan-price">¥1000</div>
        </div>
      </div>
    </div>
    
    <h2 class="recharge-title">选择支付方式</h2>
    
    <div class="payment-methods">
      <div class="method-item">
        <div class="method-icon">
          <i class="fa fa-credit-card" style="color:#007bff;"></i>
        </div>
        <div class="method-name">微信支付</div>
        <div class="method-select"></div>
      </div>
      <div class="method-item selected">
        <div class="method-icon">
          <i class="fa fa-paypal" style="color:#00aae3;"></i>
        </div>
        <div class="method-name">支付宝</div>
        <div class="method-select selected"></div>
      </div>
    </div>
    
    <button class="recharge-btn" id="premiumPayBtn">确认支付 ¥300</button>
    
    <p class="footer-note">
      会员套餐仅限VIP用户购买，购买后将自动续期会员30天<br>
      赠送积分将在主积分到账后24小时内发放
    </p>
  </div>
  
  <!-- 阶梯充值样式 -->
  <div class="recharge-page" id="tiered">
    <div class="balance-info">
      <div class="balance-title">我的积分</div>
      <div class="balance-amount">850</div>
      <div class="balance-desc">累计充值越多，单价越优惠</div>
    </div>
    
    <h2 class="recharge-title">阶梯充值方案</h2>
    
    <div class="tiered-plans">
      <div class="tiered-plan">
        <div class="tiered-icon">
          <i class="fa fa-bolt"></i>
        </div>
        <div class="tiered-info">
          <div class="tiered-title">基础充值</div>
          <div class="tiered-desc">适合初次体验，无额外赠送</div>
        </div>
        <div class="tiered-amount">
          <div class="tiered-price">¥50</div>
          <div class="tiered-points">500积分</div>
        </div>
      </div>
      
      <div class="tiered-plan">
        <div class="tiered-icon">
          <i class="fa fa-rocket"></i>
        </div>
        <div class="tiered-info">
          <div class="tiered-title">进阶充值</div>
          <div class="tiered-desc">额外赠送50积分，性价比更高</div>
        </div>
        <div class="tiered-amount">
          <div class="tiered-price">¥100</div>
          <div class="tiered-points">1050积分</div>
        </div>
      </div>
      
      <div class="tiered-plan">
        <div class="tiered-icon">
          <i class="fa fa-plane"></i>
        </div>
        <div class="tiered-info">
          <div class="tiered-title">高级充值</div>
          <div class="tiered-desc">额外赠送150积分+月度会员</div>
        </div>
        <div class="tiered-amount">
          <div class="tiered-price">¥200</div>
          <div class="tiered-points">2150积分</div>
        </div>
      </div>
      
      <div class="tiered-plan">
        <div class="tiered-icon">
          <i class="fa fa-space-shuttle"></i>
        </div>
        <div class="tiered-info">
          <div class="tiered-title">尊享充值</div>
          <div class="tiered-desc">额外赠送500积分+季度会员</div>
        </div>
        <div class="tiered-amount">
          <div class="tiered-price">¥500</div>
          <div class="tiered-points">5500积分</div>
        </div>
      </div>
    </div>
    
    <div class="payment-methods">
      <div class="method-item selected">
        <div class="method-icon">
          <i class="fa fa-credit-card-alt" style="color:#666;"></i>
        </div>
        <div class="method-name">银行卡支付</div>
        <div class="method-select selected"></div>
      </div>
    </div>
    
    <button class="recharge-btn" id="tieredPayBtn">确认支付 ¥200</button>
    
    <p class="footer-note">
      阶梯充值优惠不与其他活动叠加<br>
      会员权益将在支付成功后自动激活
    </p>
  </div>
  
  <!-- 活动专题样式 -->
  <div class="recharge-page" id="campaign">
    <div class="campaign-header">
      <div class="campaign-title">限时充值特惠</div>
      <div class="campaign-desc">新年活动期间，充值最高赠送50%积分</div>
      <div class="campaign-desc">活动即将结束：</div>
      <div class="campaign-timer">
        <div class="timer-item" id="hours">02</div>
        <div class="timer-item">:</div>
        <div class="timer-item" id="minutes">45</div>
        <div class="timer-item">:</div>
        <div class="timer-item" id="seconds">30</div>
      </div>
    </div>
    
    <div class="limited-plan">
      <div class="limited-tag">限时折扣</div>
      <div class="plan-header">
        <div class="plan-name">新年特惠套餐</div>
        <div class="plan-bonus">赠50%</div>
      </div>
      <div class="plan-details">
        <div class="plan-info">
          <div class="plan-main">2000积分 + 1000赠送积分</div>
          <div class="plan-extra">每日限量100份，已售78份</div>
        </div>
        <div class="plan-price">¥200 <span style="text-decoration: line-through; color:#999; font-size:12px;">¥250</span></div>
      </div>
    </div>
    
    <h2 class="recharge-title">更多活动选项</h2>
    
    <div class="premium-plans">
      <div class="premium-plan">
        <div class="plan-header">
          <div class="plan-name">新春福袋</div>
          <div class="plan-bonus">赠30%</div>
        </div>
        <div class="plan-details">
          <div class="plan-info">
            <div class="plan-main">1000积分 + 300赠送积分</div>
            <div class="plan-extra">含随机新年礼物一份</div>
          </div>
          <div class="plan-price">¥100</div>
        </div>
      </div>
      
      <div class="premium-plan">
        <div class="plan-header">
          <div class="plan-name">年卡套餐</div>
          <div class="plan-bonus">赠全年会员</div>
        </div>
        <div class="plan-details">
          <div class="plan-info">
            <div class="plan-main">12000积分 + 全年会员</div>
            <div class="plan-extra">平均每月仅¥83</div>
          </div>
          <div class="plan-price">¥999</div>
        </div>
      </div>
    </div>
    
    <button class="recharge-btn" id="campaignPayBtn">立即抢购 ¥200</button>
    
    <p class="footer-note">
      活动时间：2023年1月1日-1月31日<br>
      赠送积分将在活动结束后3个工作日内统一发放<br>
      新年礼物将在7个工作日内寄出
    </p>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const rechargePages = document.querySelectorAll('.recharge-page');
    const planItems = document.querySelectorAll('.plan-item, .premium-plan, .tiered-plan');
    const methodItems = document.querySelectorAll('.method-item');
    const payBtns = {
      classic: document.getElementById('classicPayBtn'),
      premium: document.getElementById('premiumPayBtn'),
      tiered: document.getElementById('tieredPayBtn'),
      campaign: document.getElementById('campaignPayBtn')
    };
    const backBtn = document.getElementById('backBtn');
    const helpBtn = document.getElementById('helpBtn');
    const toast = document.getElementById('toast');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        rechargePages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}样式`);
      });
    });
    
    // 选择充值方案
    planItems.forEach(item => {
      item.addEventListener('click', function() {
        // 移除同类型的其他选中状态
        const parent = this.parentElement;
        parent.querySelectorAll('.plan-item, .premium-plan, .tiered-plan').forEach(el => {
          el.classList.remove('selected', 'highlight');
          if (el.classList.contains('premium-plan')) {
            el.classList.remove('highlight');
          }
        });
        
        // 设置当前选中状态
        this.classList.add('selected');
        if (this.classList.contains('premium-plan')) {
          this.classList.add('highlight');
        }
        
        // 更新支付按钮金额
        const price = this.getAttribute('data-price') || this.querySelector('.plan-price').textContent.replace(/[^0-9]/g, '');
        const style = document.querySelector('.recharge-page.active').id;
        payBtns[style].textContent = style === 'campaign' ? `立即抢购 ¥${price}` : `确认支付 ¥${price}`;
        
        showToast(`已选择 ${this.querySelector('.plan-name, .tiered-title, .plan-points').textContent}`);
      });
    });
    
    // 选择支付方式
    methodItems.forEach(item => {
      item.addEventListener('click', function() {
        // 移除其他选中状态
        this.parentElement.querySelectorAll('.method-item').forEach(el => {
          el.classList.remove('selected');
          el.querySelector('.method-select').classList.remove('selected');
        });
        
        // 设置当前选中状态
        this.classList.add('selected');
        this.querySelector('.method-select').classList.add('selected');
        
        showToast(`已选择 ${this.querySelector('.method-name').textContent}`);
      });
    });
    
    // 支付按钮点击事件
    Object.values(payBtns).forEach(btn => {
      btn.addEventListener('click', function() {
        showToast('正在跳转到支付页面...');
        // 实际项目中这里会跳转到支付页面或调用支付接口
      });
    });
    
    // 返回按钮点击事件
    backBtn.addEventListener('click', function() {
      showToast('返回上一页');
      // 实际应用中可以使用history.back()
    });
    
    // 帮助按钮点击事件
    helpBtn.addEventListener('click', function() {
      showToast('积分充值帮助中心');
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
    
    // 活动倒计时（简单模拟）
    function updateTimer() {
      const secondsEl = document.getElementById('seconds');
      let seconds = parseInt(secondsEl.textContent);
      
      seconds--;
      if (seconds < 0) {
        seconds = 59;
        const minutesEl = document.getElementById('minutes');
        let minutes = parseInt(minutesEl.textContent);
        minutes--;
        if (minutes < 0) {
          minutes = 59;
          const hoursEl = document.getElementById('hours');
          let hours = parseInt(hoursEl.textContent);
          hours--;
          if (hours < 0) hours = 0;
          hoursEl.textContent = hours.toString().padStart(2, '0');
        }
        minutesEl.textContent = minutes.toString().padStart(2, '0');
      }
      secondsEl.textContent = seconds.toString().padStart(2, '0');
    }
    
    // 每秒更新一次倒计时
    setInterval(updateTimer, 1000);
  </script>
</body>
</html>
